<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <!-- 引入vue.js -->
        <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    </head>
    <body>
        <div id='app'>
            <input type="button" value="获取元素" @click="getElement">
            <h3 id="myh3" ref="myh3">哈哈哈，好逗啊</h3>
            <hr>
            <login ref="mylogin"></login>
        </div>
    
    </body>
    <script>
        let login = {
            template:"<h1>login组件</h1>",
            data(){
                return {
                    msg:"子组件msg"
                }
            },
            methods:{
                show(){
                    console.log("子组件show方法")
                }
            }
        }
        // 实例化vue对象
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                msg:"父组件msg"
            },
            methods:{
                getElement(){
                    // console.log(document.getElementById('myh3').innerText)
                    console.log(this.$refs.myh3.innerText)
                    console.log(this.$refs.mylogin.msg)
                }
            },
            components:{
                login
            }
        })
    </script>
</html>